<template>
	<view class="page">
		<view class="content">
			<image :src="imgBanner" mode="widthFix" class="bgCon"></image>
			<view class="imgs">
				<!--  @click="toUrl(item.description)" -->
				<view class="imgItem" v-for="(item,index) in imgList" :key="index">
					<image :src="item.path" mode="widthFix" class="img"></image>
					<!-- <view class="more" v-if="item.description!=''">查看详情</view> -->
					<image v-if="item.description!=''" src="/static/news/more2.png" mode="widthFix" class="more"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		articleDetail,
		positionList,
		positionDetail
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				info: '',
				imgList: [],
				type: 1,
				imgBanner:''
			}
		},
		onLoad(option) {
			// this.getInfo()
		},
		mounted() {
			this.getList()
			this.getBanner()
		},
		methods: {
			toUrl(u) {
				if(u!=''){
					window.location.href = u
				}
			},
			toReturn() {
				if(this.type==3){
					window.history.back();
				}else{
					uni.navigateBack()
				}
			},
			toReturn2() {
				if (this.type == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.redirectTo({
						url: '/pages/news/news'
					})
				}

			},
			async getInfo() {
				const result = await articleDetail({
					article_id: this.article_id
				})
				this.info = result.data
			},
			async getList() {
				const result = await positionList({
					position_id: 20
				})
				this.imgList = result.data
			},
			async getBanner() {
				const result = await positionDetail({
					position_id: 28
				})
				this.imgBanner = result.data.path
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		overflow-y: hidden;
	}

	.return {}

	.page1 {
		padding: 80rpx 32rpx;
	}

	.title {
		font-size: 32rpx;
		// text-align: center;
		font-weight: bold;
	}

	.tit-info {
		font-size: 26rpx;
		// text-align: center;
		margin: 16rpx 0 30rpx;
		color: grey;
	}

	.content {
		font-size: 28rpx;
		position: relative;
		padding-top: 130rpx;
		padding-bottom: 50rpx;

		.bgCon {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.imgs {
			padding: 0 10rpx;
			overflow-x: auto;
			white-space: nowrap;
			.imgItem {
				display: inline-block;
				width: 320rpx;
				position: relative;
				margin-right: 14rpx;

				.img {
					width: 100%;
				}

				.more {
					width: 112rpx;
					position: absolute;
					top: 0rpx;
					right: 12rpx;
					// box-shadow: 1rpx 2rpx 10rpx 2rpx gainsboro;
					// background: #FF9F00;
					color: white;
					font-size: 20rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 1;
					padding: 10rpx 0;
					// border: solid 2rpx #FFC462;
				}
			}
		}

		// .imgItem {
		// 	position: absolute;
		// }

		// .img1 {
		// 	width: 290rpx;
		// 	top: 265rpx;
		// 	left: 23rpx;
		// }

		// .img2 {
		// 	width: 350rpx;
		// 	top: 230rpx;
		// 	right: 15rpx;
		// }

		// .img3 {
		// 	width: 138rpx;
		// 	top: 385rpx;
		// 	left: 23rpx;
		// }

		// .img4 {
		// 	width: 240rpx;
		// 	top: 385rpx;
		// 	left: 170rpx;
		// }

		// .img5 {
		// 	width: 240rpx;
		// 	top: 385rpx;
		// 	right: 28rpx;
		// }

		// .img6 {
		// 	width: 328rpx;
		// 	top: 560rpx;
		// 	left: 23rpx;
		// }

		// .img7 {
		// 	width: 314rpx;
		// 	top: 560rpx;
		// 	right: 11rpx;
		// }

		// .img8 {
		// 	width: 225rpx;
		// 	top: 700rpx;
		// 	left: 23rpx;
		// }

		// .img9 {
		// 	width: 210rpx;
		// 	top: 700rpx;
		// 	left: 260rpx;
		// }

		// .img10 {
		// 	width: 185rpx;
		// 	top: 700rpx;
		// 	right: 20rpx;
		// }
	}

	.myVideo {
		width: 100%;
		object-fit: cover;
		// overflow: hidden;
		// width: 100%;
		// // height: 360px;
		// /* 设置一个固定的高度 */
		// position: relative;
		// .myVideo {
		// 	width: 100%;
		// 	object-fit: fill;
		// 	height: auto;
		// 	// height: 100%;
		// }
	}
</style>